<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>Add Notification</title>
<link rel="stylesheet" type="text/css" href="setting.css" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="clockFactory.js"></script>
<script type="text/javascript" src="ring.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
    <header>
      <h1>Add A Notification</h1>
	  <nav>
      <a href="clock.htm" target="_self">Home &nbsp;</a>
      <a href="setting.htm" target="_self">Personalize The Clock  &nbsp;</a>
      <a href="addEvent.htm" target="_self">Add A Notification  &nbsp;</a>
      <a href="removeEvent.htm" target="_self">Remove Notifications &nbsp;</a>
	  <a href="about.htm" target="_self">About &nbsp;</a>
	  </nav>
    </header>
    <article></article>
<h2>Please select the type of the Notification</h2>

<a href="javascript:switchid('a1');">One Off Event</a> <br />
<a href="javascript:switchid('a2');">Regular Event</a> <br />

<hr/>

	<div id='a1' style="display:none;">
	    <form name="oneOff" action="clock.htm" onsubmit="oneOffCheck()">
		
		<p>Please Select Time and Date for Your Notification</p>
		<input type="text" name="date" id="date" /><br />
		<input type="text" name="time" id="time"  value="09:30"/><br />

		<p>Please Select An Icon</p>
        <p><label> <input type=radio name=icon value="icons/gifts.png" checked> <img src="icons/gifts.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/basket-full.png" > <img src="icons/basket-full.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/exam.png" > <img src="icons/exam.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Cake.png" > <img src="icons/Cake.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/football.png" > <img src="icons/football.png" alt="HTML5"/> </label>
		</p>
        <p><label> <input type=radio name=icon value="icons/wallet.png"> <img src="icons/wallet.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/cookie.png"> <img src="icons/cookie.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/doctor.png"> <img src="icons/doctor.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/DoubleHappiness.png"> <img src="icons/DoubleHappiness.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/alarm-clock.png"> <img src="icons/alarm-clock.png" alt="HTML5"/> </label>
		</p>
        <p><label> <input type=radio name=icon value="icons/telephone.png"> <img src="icons/telephone.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Bouquet.png"> <img src="icons/Bouquet.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Rings.png"> <img src="icons/Rings.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/holiday.png"> <img src="icons/holiday.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/plane.png"> <img src="icons/plane.png" alt="HTML5"/> </label>
		</p>

		<p>Please Add A Short Description</p>
        <input type="text" name="description" /><br />
        <input type="submit" value="Add">
		</form>
	</div>

	<div id='a2' style="display:none;">
		<h3>Please Select Between Daily/Monthly/Yearly Notification</h3>
		<a href="javascript:switchid('a21');">Daily Event</a> <br />
        <a href="javascript:switchid('a22');">Monthly Event</a> <br />
        <a href="javascript:switchid('a23');">Yearly Event</a> <br />
	</div>
	
	<div id='a21' style="display:none;">
		<p>Please Select the Time for Your Notification</p>
		<form name="daily" action="clock.htm" onsubmit="dailyCheck()">
		<input type="text" name="dailyTime" id="dailyTime"  value="09:30"/><br />

		<p>Please Select An Icon</p>
        <p><label> <input type=radio name=icon value="icons/gifts.png" checked> <img src="icons/gifts.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/basket-full.png" > <img src="icons/basket-full.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/exam.png" > <img src="icons/exam.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Cake.png" > <img src="icons/Cake.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/football.png" > <img src="icons/football.png" alt="HTML5"/> </label>
		</p>
        <p><label> <input type=radio name=icon value="icons/wallet.png"> <img src="icons/wallet.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/cookie.png"> <img src="icons/cookie.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/doctor.png"> <img src="icons/doctor.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/DoubleHappiness.png"> <img src="icons/DoubleHappiness.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/alarm-clock.png"> <img src="icons/alarm-clock.png" alt="HTML5"/> </label>
		</p>
        <p><label> <input type=radio name=icon value="icons/telephone.png"> <img src="icons/telephone.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Bouquet.png"> <img src="icons/Bouquet.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Rings.png"> <img src="icons/Rings.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/holiday.png"> <img src="icons/holiday.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/plane.png"> <img src="icons/plane.png" alt="HTML5"/> </label>
		</p>
		<p>Please Add A Short Description</p>
        <input type="text" name="description" /><br />
        <input type="submit" value="Add">
		</form>
	</div>
	
	<div id='a22' style="display:none;">
		<p>Please Select the Date for Your Notification</p>
		<form name="monthly" action="clock.htm" onsubmit="monthlyCheck()">
		<input type="text" name="monthlyDate" id="monthlyDate" /><br />
		
		<p>Please Select An Icon</p>
        <p><label> <input type=radio name=icon value="icons/gifts.png" checked> <img src="icons/gifts.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/basket-full.png" > <img src="icons/basket-full.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/exam.png" > <img src="icons/exam.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Cake.png" > <img src="icons/Cake.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/football.png" > <img src="icons/football.png" alt="HTML5"/> </label>
		</p>
        <p><label> <input type=radio name=icon value="icons/wallet.png"> <img src="icons/wallet.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/cookie.png"> <img src="icons/cookie.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/doctor.png"> <img src="icons/doctor.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/DoubleHappiness.png"> <img src="icons/DoubleHappiness.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/alarm-clock.png"> <img src="icons/alarm-clock.png" alt="HTML5"/> </label>
		</p>
        <p><label> <input type=radio name=icon value="icons/telephone.png"> <img src="icons/telephone.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Bouquet.png"> <img src="icons/Bouquet.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Rings.png"> <img src="icons/Rings.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/holiday.png"> <img src="icons/holiday.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/plane.png"> <img src="icons/plane.png" alt="HTML5"/> </label>
		</p>
		<p>Please Add A Short Description</p>
        <input type="text" name="description" /><br />
        <input type="submit" value="Add">
		</form>
	</div>
	
	<div id='a23' style="display:none;">
		<p>Please Select the Date for Your Notification</p>
		<form name="yearly" action="clock.htm" onsubmit="yearlyCheck()">
		<input type="text" name="yearlyDate" id="yearlyDate" /><br />
		<p>Please Select An Icon</p>
        <p><label> <input type=radio name=icon value="icons/gifts.png" checked> <img src="icons/gifts.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/basket-full.png" > <img src="icons/basket-full.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/exam.png" > <img src="icons/exam.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Cake.png" > <img src="icons/Cake.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/football.png" > <img src="icons/football.png" alt="HTML5"/> </label>
		</p>
        <p><label> <input type=radio name=icon value="icons/wallet.png"> <img src="icons/wallet.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/cookie.png"> <img src="icons/cookie.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/doctor.png"> <img src="icons/doctor.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/DoubleHappiness.png"> <img src="icons/DoubleHappiness.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/alarm-clock.png"> <img src="icons/alarm-clock.png" alt="HTML5"/> </label>
		</p>
        <p><label> <input type=radio name=icon value="icons/telephone.png"> <img src="icons/telephone.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Bouquet.png"> <img src="icons/Bouquet.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/Rings.png"> <img src="icons/Rings.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/holiday.png"> <img src="icons/holiday.png" alt="HTML5"/> </label>
		<label> <input type=radio name=icon value="icons/plane.png"> <img src="icons/plane.png" alt="HTML5"/> </label>
		</p>
		
		<p>Please Add A Short Description</p>
        <input type="text" name="description" /><br />
        <input type="submit" value="Add">
		</form>
	</div>

<script language="JavaScript">
//use jquery datepicker
$(document).ready(function(){
    $("#date").datepicker({ 
    });
})
$("#monthlyDate").datepicker({});
$("#yearlyDate").datepicker({});
//give it a default value
var myDate = new Date();
var currentDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +myDate.getFullYear();
$("#date").val(currentDate);
$("#monthlyDate").val(currentDate);
$("#yearlyDate").val(currentDate);


$("#time").timepicker({});
$("#dailyTime").timepicker({});


function oneOffCheck(){
    var cookies={};
	cookies=getCookies();
	/*
    var getKeys = function(cookies){
       var keys = [];
       for(var key in cookies){
          keys.push(key);
       }
       return keys;
    }
	
    //make sure all IDs are unique 
	var id=getKeys.length+1;
	alert(id);
	*/
	var currentEvents=cookies["oneOff"];
	if (currentEvents===undefined)
	{
	    currentEvents="";
	}
	var chosen = "";
    var len = document.oneOff.icon.length;

    for (i = 0; i <len; i++){
        if(document.oneOff.icon[i].checked){
            chosen=document.oneOff.icon[i].value;
        }
	}
	//data to be write to local file
	//seprator | between attributes and $ for different events
	var data=document.oneOff.date.value+"|"+document.oneOff.time.value+"|"+chosen+"|"+document.oneOff.description.value+"$";
	var temp=currentEvents+data;
	setCookie("oneOff", temp, 3600);
	alert("Notifcation added to system");
}

function dailyCheck(){
    var cookies={};
	cookies=getCookies();
	
	var currentEvents=cookies["daily"];
	if (currentEvents===undefined)
	{
	    currentEvents="";
	}

	var chosen = "";
    var len = document.daily.icon.length;

    for (i = 0; i <len; i++){
        if(document.daily.icon[i].checked){
            chosen=document.daily.icon[i].value;
        }
	}
	//data to be write to local file
	var data=document.daily.dailyTime.value+"|"+chosen+"|"+document.daily.description.value+"$";
	var temp=currentEvents+data;
	setCookie("daily", temp, 3600);
	alert("Notifcation added to system");
}

function monthlyCheck(){
    var cookies={};
	cookies=getCookies();
	
	var currentEvents=cookies["monthly"];
	if (currentEvents===undefined)
	{
	    currentEvents="";
	}

	var chosen = "";
    var len = document.monthly.icon.length;

    for (i = 0; i <len; i++){
        if(document.monthly.icon[i].checked){
            chosen=document.monthly.icon[i].value;
        }
	}
	//data to be write to local file
	var data=document.monthly.monthlyDate.value+"|"+chosen+"|"+document.monthly.description.value+"$";
	var temp=currentEvents+data;
	setCookie("monthly", temp, 3600);
	alert("Notifcation added to system");
}

function yearlyCheck(){
    var cookies={};
	cookies=getCookies();
	
	var currentEvents=cookies["yearly"];
	if (currentEvents===undefined)
	{
	    currentEvents="";
	}
	
	var chosen = "";
    var len = document.yearly.icon.length;

    for (i = 0; i <len; i++){
        if(document.yearly.icon[i].checked){
            chosen=document.yearly.icon[i].value;
        }
	}
	//data to be write to local file
	var data=document.yearly.yearlyDate.value+"|"+chosen+"|"+document.yearly.description.value+"$";
	var temp=currentEvents+data;
	setCookie("yearly", temp, 3600);
	alert("Notifcation added to system");
}

function switchid(id){	
	if(id=="a1")
	{
	    hidediv("a2");
		hidediv("a21");
		hidediv("a22");
		hidediv("a23");
	}
	else if(id=="a2")
	{
	    hidediv("a1");
		hidediv("a21");
		hidediv("a22");
		hidediv("a23");
	}
	else if(id=="a21")
	{
		hidediv("a22");
		hidediv("a23")
	}
	else if(id=="a22")
	{
		hidediv("a21");
		hidediv("a23");
	}
	else if(id=="a23")
	{
		hidediv("a21");
		hidediv("a22");
	}
	showdiv(id);
}

function hidediv(id) {
	if (document.getElementById) {
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) {
			document.id.display = 'none';
		}
		else {
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	
		  
	if (document.getElementById) { 
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { 
			document.id.display = 'block';
		}
		else {
			document.all.id.style.display = 'block';
		}
	}
}
</script>
<footer>page powered by <img src="icons/HTML5_Logo_32.png" alt="HTML5"/></footer>


</body>
</html>